<template>
	<view class="business">
		<view class="" style="
        margin-top: 800rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 700;
        font-size: 40rpx;
      " v-if="list.length == 0">
			请联系业务人员开通账号权限使用!
		</view>
		<view class="business-header">
			<view class="headerConten" v-if="service">
				<view class="Image">
					<image :src="service.merchant.mer_avatar"></image>
				</view>
				<view class="headerName">{{
          service.merchant.mer_name || "暂无店铺"
        }}</view>
			</view>
			<view>
				<view class="list acea-row" v-if="orderData">
					<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=today&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.today.payPrice }}</view>
						<view>今日成交额</view>
					</navigator>
					<navigator class="item"
						:url="`/pages/admin/statistics/index?type=price&time=yesterday&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.yesterday.payPrice }}</view>
						<view>昨日成交额</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=price&time=month&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.month.payPrice }}</view>
						<view>本月成交额</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=today&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.today.orderNum }}</view>
						<view>今日订单数</view>
					</navigator>
					<navigator class="item"
						:url="`/pages/admin/statistics/index?type=order&time=yesterday&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.yesterday.orderNum }}</view>
						<view>昨日订单数</view>
					</navigator>
					<navigator class="item" :url="`/pages/admin/statistics/index?type=order&time=month&merId=${mer_id}`"
						hover-class="none">
						<view class="num">{{ orderData.month.orderNum }}</view>
						<view>本月订单数</view>
					</navigator>
				</view>
				<view>
					<view class="headerUser">
						<navigator class="items" :url="`/pages/admin/orderList/index?types=1&merId=${mer_id}`"
							hover-class="none">
							<view class="nums">{{ census.unpaid }}</view>
							<view class="contens">待付款</view>
						</navigator>
						<navigator class="items" :url="`/pages/admin/orderList/index?types=2&merId=${mer_id}`"
							hover-class="none">
							<view class="nums">{{ census.unshipped }}</view>
							<view class="contens">待发货</view>
						</navigator>
						<navigator class="items" :url="`/pages/admin/orderList/index?types=3&merId=${mer_id}`"
							hover-class="none">
							<view class="nums">{{ census.untake }}</view>
							<view class="contens">待收货</view>
						</navigator>
						<navigator class="items" :url="`/pages/admin/orderList/index?types=4&merId=${mer_id}`"
							hover-class="none">
							<view class="nums">{{ census.unevaluate }}</view>
							<view class="contens">租用中</view>
						</navigator>
						<navigator class="items" :url="`/pages/admin/orderList/index?types=6&merId=${mer_id}`"
							hover-class="none">
							<view class="nums">{{ census.refund }}</view>
							<view class="contens">退款</view>
						</navigator>
					</view>
				</view>
				<view class="college">
					<view class="collegeLeft">
						<view class="collegeImage">
							<image src="../../../static/images/boss.png"></image>
						</view>
						<view class="collegetitle">
							<view class="titleTop">商家学院</view>
							<view class="titleBottom">商家操作必修课</view>
						</view>
					</view>
					<view class="collegeRight">
						<view class="RightTitle">立刻学习</view>
						<view class="RightImage">
							<image src="../../../static/images/goto.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="busBottome">
				<view class="busBottomeTitle">常用应用</view>
				<view class="businessList">
					<view @click="goNext(item)" class="listBoxs" v-for="(item, index) in list" :key="index">
						<text :class="item.icon" class="busIcon"></text>
						<view>{{ item.title }}</view>
					</view>
				</view>
			</view>

			<!-- <view
          class="headerbox"
          @click="changeTips"
          v-if="service"
          style="margin-top: 100rpx"
        >
          <image :src="service.merchant.mer_avatar" mode=""></image>
          <span class="font line1">{{
            service.merchant.mer_name || "暂无店铺"
          }}</span>
          <text v-if="!downStatus" class="iconfont icon-xiala1 spin"></text>
          <text v-else class="iconfont icon-xiala1"></text>
        </view> -->
		</view>
		<!-- <view class="business-content" style="margin-top: 1200rpx">
      <view
        @click="goNext(item)"
        class="listBox"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="BoxIs">
          <text :class="item.icon" class="businessIcon"></text>
          <view>{{ item.title }}</view>
        </view>
      </view>
    </view> -->
		<!-- <view class="hrefBox">
        <text
          >点击查看<a
            href="https://mer.syn.tswm.club/pages/users/user_about/index?from=sys_user_agree"
            >《服务条款》</a
          >和<a
            href="https://mer.syn.tswm.club/pages/users/user_about/index?from=sys_userr_privacy"
            >《隐私政策》</a
          ></text
        >
      </view> -->
		<view class="Bottoms">
			<view class="BottomsBox">
				<navigator class="footnav" :url="`/pages/admin/business/index`" hover-class="none">
					<view class="footBox">
						<view class="bottomeIcon">
							<image src="../../../static/images/home1.png"></image>
						</view>
					</view>
					<view style="color: #5b7eef">首页</view>
				</navigator>
				<navigator class="footnav" :url="`/pages/admin/my/index`" hover-class="none">
					<view class="footBox">
						<view class="bottomeIcon">
							<image src="../../../static/images/people.png"></image>
						</view>
					</view>
					<view>个人</view>
				</navigator>
			</view>
		</view>
		<shopList ref="shopList" @changeStoreClose="changeClose" @getService="getService" :is_sys="is_sys"></shopList>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import shopList from "@/components/shopList";
	import {
		getLogout
	} from "@/api/user.js";
	import {
		orderStatistics
	} from "@/api/admin";

	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	export default {
		name: "business",
		components: {
			shopList,
		},
		data() {
			return {
				census: {},
				domain: HTTP_REQUEST_URL,
				is_sys: 0,
				downStatus: false,
				service: null,
				loginType: "h5",
				orderData: {
					today: {},
					yesterday: {},
					month: {},
				},

				mer_id: "",
			};
		},
		computed: {
			list() {
				if (!this.service) return [];
				const merId = this.service.mer_id;
				const list = [{
					type: "customer",
					title: "客服记录",
					url: "/pages/chat/customer_list/index?type=1&mer_id=" + merId,
					icon: "iconfont icon-kefujilu",
				}, ];
				if (this.service.is_verify) {
					list.push({
						title: "订单核销",
						url: "/pages/admin/order_cancellation/index?mer_id=" + merId,
						icon: "iconfont icon-dingdanhexiao",
					});
				}
				if (this.service.customer) {
					list.push({
						title: "订单管理",
						url: "/pages/admin/order/index?mer_id=" + merId,
						icon: "iconfont icon-dingdanguanli",
					});
				}
				if (this.service.is_goods) {
					list.push({
						title: "商品管理",
						url: "/pages/product/list/index?mer_id=" + merId,
						icon: "iconfont icon-shangjiaguanli",
					});
				}
				list.push({
					title: "平台消息",
					url: "/pages/product/msg/msg?mer_id=" + merId,
					icon: "iconfont icon-shangjiaguanli",
				});
				list.push({
					title: "我的钱包",
					url: "/pages/product/wallet/wallet?mer_id=" + merId,
					icon: "iconfont icon-shangjiaguanli",
				});
				return list;
			},
		},
		onLoad: function(options) {
			let token = uni.getStorageSync("LOGIN_STATUS_TOKEN");
			if (!token) {
				uni.redirectTo({
					url: "/pages/users/login/index",
				});
				return;
			}
			// this.is_sys = options.is_sys;
			this.is_sys = 0;
			this.getStoreList({
				is_sys: this.is_sys,
			});
			uni.setNavigationBarTitle({
				title: this.is_sys ? "平台管理" : "商家管理",
			});
		},
		methods: {
			outLogin: function() {
				let that = this;
				if (that.loginType == "h5") {
					uni.showModal({
						title: "提示",
						content: "确认退出登录?",
						success: function(res) {
							if (res.confirm) {
								getLogout()
									.then((res) => {
										that.$store.commit("LOGOUT");
										uni.redirectTo({
											url: "/pages/users/login/index",
										});
									})
									.catch((err) => {
										console.log(err);
									});
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						},
					});
				}
			},
			getOrderStatistics: function() {
				console.log(this.service);
				let that = this;
				that.mer_id = that.service.mer_id;
				orderStatistics(that.service.mer_id).then(
					(res) => {
						that.census = res.data.order;
						that.orderData = res.data.data;
					},
					(err) => {
						that.$util.Tips({
							title: err.msg,
						});
					}
				);
			},
			changeCancel() {
				uni.navigateTo({
					url: "/pages/users/user_about/index?from=" + "the_cancellation_msg",
				});
			},
			getStoreList: function(data) {
				this.$nextTick(() => {
					this.$refs.shopList.getStoreList(data);
				});
			},
			changeTips(data) {
				this.downStatus = !this.downStatus;
				this.$refs.shopList.isShowStore();
			},
			changeClose() {
				this.downStatus = false;
			},
			goNext(item) {
				if (item.title == "退出登录") {
					this.outLogin();
					return;
				}
				if (item.type == "customer" && this.service.status == 0) {
					return this.$util.Tips({
						title: "客服已离线，请开启客服状态！",
					});
				} else {
					uni.navigateTo({
						url: item.url,
					});
				}
			},
			getService: function(data) {
				console.log(data);
				this.service = data;
				if (data && data.merchant) {
					uni.setNavigationBarTitle({
						title: data.merchant.mer_name,
					});
				} else {
					uni.setNavigationBarTitle({
						title: !data.mer_id ? "平台管理" : "商家管理",
					});
				}
				uni.setStorageSync("mer_id", this.service.mer_id);
				this.getOrderStatistics();
			},
		},
	};
</script>

<style scoped lang="scss">
	.hrefBox {
		position: fixed;
		bottom: 20rpx;
		left: 20%;
	}

	.businessIcon {
		color: #2d5cf6;
		font-size: 80rpx;
		display: inline-block;
		margin-bottom: 29rpx;
	}

	.business-header {
		height: 505rpx;
		// background: linear-gradient(180deg, #2D5CF6 0%, rgba(34, 145, 248, 0) 100%);
		border-radius: 0 0 50rpx 50rpx;
		background: #2d5cf6;
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;

		.headerbox {
			max-width: 360rpx;
			margin: 0 auto;
			position: relative;
			padding: 10rpx 0rpx 10rpx 0rpx;
			background-color: rgba(0, 0, 0, 0.25);
			border-radius: 30rpx;
			color: #ffffff;
			margin-top: 33rpx;

			.font {
				max-width: 260rpx;
				display: inline-block;
				margin-left: 10rpx;
				line-height: 28rpx;
			}

			image {
				width: 34rpx;
				height: 34rpx;
				position: relative;
				top: 4rpx;
			}

			.spin {
				display: inline-block;
				transform: rotate(180deg);
				font-size: 36rpx;
			}
		}
	}

	.business-content {
		width: 100%;
		padding: 0 18rpx;
		margin-top: 151rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;

		.listBox {
			width: 345rpx;
			height: 270rpx;
			background: #ffffff;
			box-shadow: 0rpx 5rpx 15rpx rgba(142, 82, 77, 0.1);
			border-radius: 20rpx;
			z-index: 1;
			margin-bottom: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 66rpx;
				height: 66rpx;
				background: #f34c20;
			}
		}
	}

	/deep/ radio .wx-radio-input.wx-radio-input-checked,
	/deep/radio .uni-radio-input.uni-radio-input-checked {
		border: 1px solid #2d5cf6 !important;
		background-color: #2d5cf6 !important;
	}

	// .businessImage{
	// 	width: 100%;
	// 	height: 120rpx;
	// 	image{
	// 		width: 100%;
	// 		height: 100%;
	// 	}
	// }
	.headerConten {
		padding: 20rpx;
		margin-top: 50rpx;
		display: flex;

		.Image {
			width: 60rpx;
			height: 60rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.headerName {
			font-weight: bold;
			font-size: 28rpx;
			color: #fff;
			margin-left: 30rpx;
			line-height: 50rpx;
		}
	}

	.list {
		text-align: center;
		display: flex;
		justify-content: space-between;
	}

	.item {
		padding: 20rpx 0;
		width: 33%;
		color: #fff;
	}

	.items {
		color: #333;
		width: 15%;
	}

	.headerUser {
		text-align: center;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
		margin: 40rpx auto;
		display: flex;
		justify-content: space-between;
		width: 90%;
		background: #fff;
	}

	.contens {
		color: #333;
	}

	.nums {
		font-weight: bold;
		font-size: 30rpx;
	}

	.college {
		border-radius: 20rpx;
		margin: 0rpx auto;
		background: #5b7eef;
		width: 90%;
		padding: 40rpx 20rpx;
		display: flex;
		justify-content: space-between;

		.collegeLeft {
			display: flex;

			.collegeImage {
				margin-top: 10rpx;
				width: 76rpx;
				height: 56rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.collegetitle {
				margin-left: 20rpx;
				text-align: left;
				color: #fff;

				.titleTop {
					text-align: left;
					font-size: 30rpx;
				}
			}
		}

		.collegeRight {
			margin-top: 15rpx;
			padding: 5rpx 20rpx;
			border-radius: 50rpx;
			display: flex;
			height: 50rpx;
			background: #fff;

			.RightTitle {
				line-height: 40rpx;
				color: #5b7eef;
			}

			.RightImage {
				margin-top: 5rpx;
				width: 32rpx;
				height: 32rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.busBottome {
		border-radius: 20rpx;
		margin: 20rpx 40rpx;
		padding: 40rpx 20rpx;
		background: #fff;
	}

	.businessList {
		margin-top: 40rpx;
		padding: 0 20rpx;
		display: flex;
		flex-flow: row wrap // justify-content: space-between;
	}

	.BoxIs {
		width: 25%;
	}

	.busIcon {
		color: #333;
		font-size: 40rpx;
	}

	.listBoxs {
		width: 33%;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		text-align: center;
	}

	.busBottomeTitle {
		font-weight: bold;
		text-align: left;
	}

	.Bottoms {
		width: 100%;
		position: fixed;
		bottom: 0;

		.BottomsBox {
			display: flex;
			justify-content: space-between;
		}
	}

	.footnav {
		padding-bottom: 50rpx;
		padding-top: 20rpx;
		width: 50%;
		background: #fff;
		text-align: center;
	}

	.bottomeIcon {
		margin: 0 auto;
		width: 48rpx;
		height: 48rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>